
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import  "./index.css"

import { EyeInvisibleOutline, EyeOutline ,CheckCircleOutline,CloseCircleOutline} from "antd-mobile-icons"
import React, { Fragment, useState, useEffect } from 'react'
import {
	Form,
	Input,
	Checkbox,
	Button,
	Toast,
	Radio,
} from 'antd-mobile'
import { getinfo,getbanks ,pay_usdt,recharge_config} from "@/apis/user.js"

const Dingdanxiangqing = (props) => {
	const { t } = useTranslation();
	const navigate = useNavigate()
	const [info,setinfo] = useState([]);
	const [userinfo,setuserinfo] = useState([]);
	const [config, setConfig] = useState({});
	
	useEffect(() => {
		if (window.scrollTo) {
			window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
			document.body.scrollTop = 0;
			} else {
			document.documentElement.scrollTop = 0;
			}
		setinfo(JSON.parse(localStorage.getItem('chongzhidata')) || {})
		setuserinfo(JSON.parse(localStorage.getItem('info')))
		recharge_config().then(res => {
			setConfig(res.data)
		})
		// console.log(info)
		// setFlag(true);
		return ()=>{console.log('初始化----个人中心')}
	}, []);
	useEffect(() => {
		// if(info.paytype == 'usdt'){
		// 	info.xiaoshu = Math.floor(Math.random() * 900) + 100
		// }
		return ()=>{console.log('初始化----个人中心')}
	}, [info]);
	// pay_usdt接口，参数：paytype 空(转数快)、usdt、bank（银行卡
	const submit = () => {
		let data = {
			amount:info.amount,
			fanli:info.fanli,
			bank_id:info.bank_id,
			xiaoshu:info.xiaoshu,
			paytype:info.paytype
		}
		pay_usdt(data).then(res => {
			if(res.status.errorCode == 1){
				Toast.show({
					content: res.status.msg,
				})
				//localStorage.removeItem('chongzhidata')
			}else{
				Toast.show({
					content: res.status.msg,
				})
				setTimeout(()=>{
					navigate('/rechargerecord')
				},1000)
			}
		})
	}
	const copy =(params)=>{
		const input = document.createElement("input");
		input.setAttribute("readonly", "readonly");
		input.setAttribute("value", params);
		document.body.appendChild(input);
		input.select();
		input.setSelectionRange(0, 9999);
		if (document.execCommand("copy")) {  
		  document.execCommand("copy");
		}
		document.body.removeChild(input);
		Toast.show({
			icon: 'success',
			content: '已复制',
		})
	}
	return (
		<React.Fragment>
			<HeaderTitle title={t('rechargeorder.title21')} right_title={t('agent.title2')} />
			<div className="czboxs">
				<div className="cztitles" hidden={info.active == 2 || info.active == 1}>{t('deposit.title5')}</div>
				<div className="cztitles" hidden={info.active == 2 || info.active == 3}>{t('rechargeorder.title7')}</div>
				<div className="cztitles" hidden={info.active == 1 || info.active == 3}>{t('rechargeorder.title8')}</div>
				<div className="cztitles1">{t('rechargeorder.title22')}</div>
				<div className="czflexs">
					<div className="czleft">
						<div>{t('rechargeorder.title23')}</div>
						<div className="fontszie26">{userinfo ? userinfo.name : ''}</div>
					</div>
					<div className="czrights" onClick={()=>copy(userinfo ? userinfo.name : '')}>{t('invite.title8')}</div>
				</div>
				<div className="czflexs">
					<div className="czleft">
						<div>{t('rechargeorder.title24')}</div>
						<div className="fontszie26" hidden={info.active == 2 || info.active == 1}>{t('deposit.title5')}</div>
						<div className="fontszie26" hidden={info.active == 2 || info.active == 3}>{t('cardmanage.title7')}</div>
						<div className="fontszie26" hidden={info.active == 1 || info.active == 3}>USDT</div>
					</div>
					<div className="czrights" onClick={()=>copy(t('deposit.title5') || t('cardmanage.title7') || 'USDT')}>{t('invite.title8')}</div>
				</div>
				{
					info.active == 3 ? (<div className="czflexs">
						<div className="czleft">
							<div>{t('rechargeorder.title27')}</div>
							<div className="fontszie26">{config.qq_account}</div>
						</div>
						<div className="czrights" onClick={()=>copy(config.qq_account)}>{t('invite.title8')}</div>
					</div>) : ""
				}
				{
					info.active == 3 ? (<div className="czflexs">
						<div className="czleft">
							<div>{t('rechargeorder.title25')}</div>
							<div className="fontszie26">{config.qq_nickname}</div>
						</div>
						<div className="czrights" onClick={()=>copy(config.qq_nickname)}>{t('invite.title8')}</div>
					</div>) : ""
				}
				{
					info.active == 2 ? (<div className="czflexs">
						<div className="czleft">
							<div>{t('rechargeorder.title27')}</div>
							<div className="fontszie26">{config.alipay_address}</div>
						</div>
						<div className="czrights" onClick={()=>copy(config.alipay_address)}>{t('invite.title8')}</div>
					</div>) : ""
				}
				{
					info.active == 2 && config.alipay_nickname ? (<div className="czflexs">
						<div className="czleft">
							<div>{t('rechargeorder.title27')}</div>
							<div className="fontszie26">{config.alipay_nickname}</div>
						</div>
						<div className="czrights" onClick={()=>copy(config.alipay_nickname)}>{t('invite.title8')}</div>
					</div>) : ""
				}
				<div className="czflexs">
					<div className="czleft">
						<div>{t('rechargeorder.title11')}</div>
						<div className="fontszie26">{info.amount}</div>
					</div>
					<div className="czrights" onClick={()=>copy(info.amount)}>{t('invite.title8')}</div>
				</div>
				{
					info.active == 2 ? (<div className="czflexs">
						<div className="czleft">
							<div>USDT支付金额</div>
							<div className="fontszie26">{(info.xxx *1).toFixed(3)}</div>
						</div>
						<div className="czrights" onClick={()=>copy((info.xxx *1 ).toFixed(3))}>{t('invite.title8')}</div>
					</div>) : ""
				}
			</div>
			<div className="czboxs2">
				<p>{t('rechargeorder.title28')}</p>
				<p>{t('rechargeorder.title29')}</p>
			</div>
			<div className="czboxs3">
				<div className="czbtns" onClick={() => navigate('/rechargerecord')}>{t('rechargeorder.title30')}</div>
				<div className="czbtns1" onClick={() => submit()}>{t('rechargeorder.title31')}</div>
			</div>
		</React.Fragment>
	)
}
export default Dingdanxiangqing